<script setup>
import { ref,watch} from 'vue';
// import router from '@/router'; //引入路由
import {useRouter} from 'vue-router'; //跳转路由
import {useRoute} from 'vue-router' //调用.query. 可以获取到跳转过来的参数
import {everydayStore} from '@/api/gongs.js'
import { ElMessage } from 'element-plus';

// 根据条件设置不同的颜色
const getBoxStyle=(item)=>{
    // console.log(item);
    // 先定义一个颜色
    let backgroundColor;
    // 根据条件判断是应该取什么颜色
    // 住满 是#67C23A
    if (item.status == 0){
        backgroundColor = '#67C23A'; //绿色
    } else if (item.status == 1) {
        backgroundColor = '#E6A23C'; //黄色
    }else {
        backgroundColor = '#F56C6C';//F56C6C红色
    }
    return {
        // 在这里runter出去条件编译完成的颜色
        backgroundColor
    };
}

// 日期
// 请求参数
const date=ref(new Date().toISOString().substr(0, 10))
// 数据
const StoreList=ref([])

// 获取数据
const getEverydayStore= async (value)=>{
   const res = await everydayStore(value)
   StoreList.value = res.data.data
   getBoxStyle(StoreList.value )
}
getEverydayStore(date.value)

// 定义日期格式方法
const formatDate = (date) => {
    const d = new Date(date);
    const year = d.getFullYear();
    const month = (d.getMonth() + 1).toString().padStart(2, '0');
    const day = d.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
};

// 监视date日期的变化
watch(date,(item)=>{
    ElMessage.success('更新完成')
    getEverydayStore(formatDate(item))
})
</script>


<template>
        <page-container title="">
            <div class="datepicker">
            日期:
                <el-date-picker
                    v-model="date"
                    type="date"
                    placeholder="Pick a date"
                    :default-value="new Date()"
                />
            </div>
                <div class="box">
                    <div class="styleBox"  v-for="item in StoreList" :key="item.id" :style="getBoxStyle(item)">
                        <div class="boxSize">
                            <div>宾馆名:{{ item.hname }}</div>
                            <div class="fs">住:{{ item.number }}/共{{ item.quantity }}</div>
                            <!-- <div>退房日期:{{ item.checkout }}</div> -->
                        </div>
                    </div>
                </div>
                      
        </page-container>
</template>

<!-- style样式部分 -->
<style scoped lang="scss">
    .box{
    // 开启grid布局
        display: grid;
        // 每行有五列，每一列是自适应 
        grid-template-columns: repeat(5,1fr);
        gap: 10px; /* 元素之间的间距，可根据需要调整 */

        .styleBox{
            // width: 200px; //不设置宽度就是自适应的
            border-radius: 10px;
            height: 80px;
            transition: all 0.2s;      
            box-sizing: border-box; //元素的实际尺寸不会因内边距和边框而改变大小
            padding: 3px 10px;     
            background-color: #9b4b4b;
        }
        .styleBox:hover {
                box-shadow: 0px 0px 10px #000 ;                
        }
        .boxSize{
            // 开启flex布局
            display: flex;
            flex-direction: column;  //成一列
            justify-content: center; //居中对齐
            font-size: 14px;
            // 给每一个div增加距离上边的距离
                div{
                    // 增加上顶2px距离
                    margin-top: 2px;
                }
                .fs{
                    // color: #5fd117;
                    font-size: 17px;
                }
        }
    }
    // 封装一套模板样式
    .yuan{
        width: 50px; /* 圆形的宽度 */
            height: 50px; /* 圆形的高度 */
            border-radius: 50%; /* 使元素变为圆形 */
            background: radial-gradient(circle at center, #7594e7, #2563eb);
            box-shadow: 
                0 8px 15px rgba(0, 0, 0, 0.3), /* 外部阴影 */
                inset 0 -4px 8px rgba(0, 0, 0, 0.4); /* 内部阴影 */
            display: flex; /* 使内容居中 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            color: white; /* 字体颜色 */
            font-family: Arial, sans-serif; /* 字体 */
            font-size: 20px; /* 字体大小 */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* 文本阴影 */
            transition: all 0.5s;
    }
    // 鼠标经过显示的样式
    .yuan:hover{
    // 放大1.2倍
        transform: scale(1.2);
    }
    .icons{
        color: rgb(209, 60, 60);
        // font-size: 50px;
        transform: scale(2);
    }
   .datepicker{
        position: absolute;
        left: 15%;
        top:84px;
   }
</style>